<template>
  <div class="common-body-wrapper">
    <search-header
      single-width="130"
      :searchList="searchList"
      @changeHeight="toRetTable"
      @confirmSearch="toSearch"
    ></search-header>
    <multi-fun-table
      :sortColumn="notFormatColumn"
      :orderType="sortType"
      :fixed-cols="fixedCols"
      :is-reset-table="isResetTable"
      :theads-info="theadsInfo"
      :tbodys-info="tbodysInfo"
      @handleMultiCheck="handleMultiCheck"
      @handleSortColumn="handleSortColumn"
      @searchFn="getList"
      @getNextPage="getNextPage"
    >
      <!--按钮-->
      <div class="operate-btn-group" slot="operateBtnGroup">
        <a
          class="ake_btn ake_btn_text"
          v-if="isPermmited('PLATFORM:MINIPROGRAM:USER:ADD')"
          @click.prevent="_add()"
        >新增</a>
      </div>

      <!--普通列-->
      <template slot="tdCell" slot-scope="props">
        <el-table-column
          :fixed="props.fixed"
          :label="props.label"
          :min-width="props.minWidth"
          :width="props.width"
          :prop="props.prop"
          :sortable="props.sortable"
        >
          <template slot-scope="scope">
            <span v-if="'reno' == props.prop">{{ scope.$index + 1 }}</span>
            <span
              v-else-if="'createTime' == props.prop"
            >{{ scope.row[props.prop] | mileSecondToDate }}</span>
            <span
              v-else-if="'chakan' == props.prop && isPermmited('PLATFORM:MINIPROGRAM:USER:READ')"
              style="color:#6a97e1"
              class="cursor"
              @click="_bindPark('查看权限', scope.row)"
            >查看</span>
            <span v-else-if="'role' == props.prop">{{ scope.row[props.prop] ? '管理员' : '收费员' }}</span>
            <span v-else-if="'onDuty' == props.prop">{{ scope.row[props.prop] ? '上班中' : '休息中' }}</span>
            <span v-else-if="'enable' == props.prop">{{ scope.row[props.prop] ? '启用' : '冻结' }}</span>
            <span v-else>{{ scope.row[props.prop] }}</span>
          </template>
        </el-table-column>
      </template>

      <!--操作列内的按钮-->
      <template slot="operateCell" slot-scope="props">
        <el-table-column
          :fixed="props.fixed"
          :label="props.label"
          width="230"
          class-name="operateCell"
        >
          <template slot-scope="scope">
            <el-button
              title="编辑"
              size="small"
              type="primary"
              icon="icon-edit"
              class="ake-icon-font"
              @click="handle(scope.row, 'edit')"
              v-if="isPermmited('PLATFORM:MINIPROGRAM:USER:UPDATE')"
              plain
            ></el-button>
            <el-button
              title="绑定停车场"
              size="small"
              type="primary"
              icon="icon-parkinglot"
              class="ake-icon-font"
              @click="handle(scope.row, 'bindPark')"
              v-if="isPermmited('PLATFORM:MINIPROGRAM:USER:BINDPARK')"
              plain
            ></el-button>
            <el-button
              title="解绑微信"
              size="small"
              type="primary"
              icon="icon-wechat2_normal"
              class="ake-icon-font"
              v-if="isPermmited('PLATFORM:MINIPROGRAM:USER:BINDWX') && scope.row['wexinId']"
              @click="handle(scope.row, 'isBind')"
              plain
            ></el-button>
            <el-button
              title="绑定微信"
              size="small"
              type="primary"
              icon="icon-wechat"
              class="ake-icon-font"
              v-if="isPermmited('PLATFORM:MINIPROGRAM:USER:UNBINDWX') && !scope.row['wexinId']"
              @click="handle(scope.row, 'isBind')"
              plain
            ></el-button>
            <el-button
              title="启用"
              size="small"
              type="primary"
              icon="icon-unlock_normal"
              class="ake-icon-font"
              :disabled="scope.row['enable'] != 0"
              v-if="isPermmited('PLATFORM:MINIPROGRAM:USER:START') && !scope.row['enable']"
              @click="handle(scope.row, 'isUp')"
              plain
            ></el-button>
            <el-button
              title="冻结"
              size="small"
              type="primary"
              icon="icon-lock"
              class="ake-icon-font"
              :disabled="scope.row['enable'] != 1"
              v-if="isPermmited('PLATFORM:MINIPROGRAM:USER:STOP') && scope.row['enable'] == 1"
              @click="handle(scope.row, 'isUp')"
              plain
            ></el-button>
            <el-button
              title="强制下班"
              size="small"
              type="primary"
              icon="icon-offDuty"
              class="ake-icon-font"
              :disabled="scope.row['onDuty'] != 1"
              v-if="isPermmited('PLATFORM:MINIPROGRAM:USER:FORCEREST')"
              @click="forceoffwork(scope.row)"
              plain
            ></el-button>
            <el-button
              title="删除"
              size="small"
              type="danger"
              icon="icon-delete"
              class="ake-icon-font"
              @click="handle(scope.row, 'del')"
              v-if="isPermmited('PLATFORM:MINIPROGRAM:USER:DELETE')"
              plain
            ></el-button>
          </template>
        </el-table-column>
      </template>
    </multi-fun-table>

    <!---->
    <table-pagination :size="total" :cur-page="pageNumber" @backData="getPagination"></table-pagination>

    <!--modal-->
    <!--至少选择一项  modal-->
    <basic-modal ref="voidTipModal" bodyTxt="请至少选择一项">
      <h3 slot="title">温馨提示</h3>
      <div class="modal-footer" slot="modal-footer">
        <button class="ake_btn ake_btn_text modal-close" @click="closed('voidTipModal')">关闭</button>
      </div>
    </basic-modal>

    <!--新增角色-->
    <basic-modal ref="itemModal" width="700" customeClass="role-row-modal" static="true">
      <h3 slot="title">{{ modalData.modalName }}</h3>
      <div class="modal-body" slot="modal-body">
        <el-form
          ref="itemForm"
          :model="itemData"
          :rules="rules"
          label-position="left"
          label-width="80px"
          style="width: 500px"
        >
          <el-form-item prop="role" label="帐号类型">
            <span v-if="itemData.role == 0 && modalData.modalName == '编辑用户'">收费员</span>
            <span v-if="itemData.role == 1 && modalData.modalName == '编辑用户'">管理员</span>

            <el-select
              v-model="itemData.role"
              placeholder="请选择"
              v-if="modalData.modalName == '新增用户'"
            >
              <el-option label="收费员" value="0"></el-option>
              <el-option label="管理员" value="1"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="帐号" prop="userId">
            <el-input class="first-item" type="text" v-model="itemData.userId"></el-input>
          </el-form-item>

          <el-form-item label="密码" prop="password">
            <el-input class="first-item" type="password" v-model="itemData.password"></el-input>
          </el-form-item>

          <el-form-item label="用户名" prop="nickName">
            <el-input class="first-item" v-model="itemData.nickName"></el-input>
          </el-form-item>
          <el-form-item label="手机号码" prop="telephone">
            <el-input class="first-item" type="number" v-model="itemData.telephone"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="modal-footer" slot="modal-footer">
        <button class="ake_btn ake_btn_text ake_btn_confirm" @click.stop="_save('itemForm')">确认</button>
        <button class="ake_btn ake_btn_text" @click="closed('itemModal')">取消</button>
      </div>
    </basic-modal>

    <!-- 绑定微信 -->
    <basic-modal
      ref="bindModal"
      width="600"
      customeClass="role-row-modal"
      static="true"
      @closed="getList()"
    >
      <h3 slot="title">{{ modalData.modalName }}</h3>
      <div class="modal-body" slot="modal-body">
        <div v-if="!wechatMsg.hasOwnProperty('nickname')" class="QRCodeBox">
          <qriously :value="QRCode" :size="200" />
        </div>
        <div v-else class="wechatMsg">
          <div class="wechatPicBox">
            <img class="wechatPic" :src="wechatMsg.headimgurl" alt />
          </div>
          <p class="wechatName">{{ wechatMsg.nickname }}</p>
          <!-- <p class="wechatCode">ssdddd</p> -->
        </div>
      </div>
      <div class="modal-footer" slot="modal-footer">
        <button class="ake_btn ake_btn_text modal-close" @click="cancleBindWechat">取消</button>
      </div>
    </basic-modal>

    <basic-modal
      ref="unbindModal"
      width="600"
      customeClass="role-row-modal"
      static="true"
      @closed="getList()"
    >
      <h3 slot="title">{{ modalData.modalName }}</h3>
      <div class="modal-body" slot="modal-body">
        <div class="wechatMsg">
          <div class="wechatPicBox">
            <img class="wechatPic" :src="headimgurl" alt />
          </div>
          <!-- <p class="wechatName">{{wechatMsg.nickname}}</p> -->
          <!-- <p class="wechatCode">ssdddd</p> -->
        </div>
      </div>
      <div class="modal-footer" slot="modal-footer">
        <button class="ake_btn ake_btn_text modal-close" @click="unbind()">确定</button>
      </div>
    </basic-modal>

    <!--选择权限树-->
    <basic-modal
      ref="setPrivilegeModal"
      width="500"
      customeClass="select-Privilege-modal"
      static="true"
    >
      <h3 slot="title">{{ modalData.modalName }}</h3>
      <div class="modal-body" slot="modal-body">
        <div class="common-tree modal-tree-box">
          <ul id="privilegeTree" name="privilegeTree" class="ztree"></ul>
        </div>
      </div>
      <div class="modal-footer" slot="modal-footer">
        <button
          v-if="modalData.modalName.indexOf('查看权限') == -1"
          type="button"
          class="ake_btn ake_btn_text ake_btn_confirm"
          @click="SetPrivilege('privilegeTree')"
        >确认</button>
        <button class="ake_btn ake_btn_text modal-close" @click="closed('setPrivilegeModal')">取消</button>
      </div>
    </basic-modal>
  </div>
</template>

<script>
import common from "@mixins/common.js";
import stardardList from "@mixins/tables/stardardList.js";

//modal
import invokeModal from "@mixins/modal/invokeModal.js";
import "../../assets/js/libs/jquery.ztree.core.min.js";
import "../../assets/js/libs/jquery.ztree.excheck.min.js";
// import BigPicModal from '@components/widgets/BigPicModal.vue'

// image
// import images from '@mixins/image.js'

// 引进vue的js
import Role from "./js/miniprogram_user_manage.js";

export default {
  name: "miniprogramUserManage",
  mixins: [common, stardardList, invokeModal, Role],
  data() {
    return {
      total: 0,
      fixedCols: 0,
      QRCode: "",
      searchList: [
        {
          index: 0,
          isShow: false,
          type: "text",
          name: "nickName",
          text: "用户名",
          value: ""
        },
        {
          index: 1,
          isShow: false,
          type: "text",
          name: "telephone",
          text: "手机号码",
          value: ""
        },
        {
          index: 2,
          isShow: false,
          type: "select",
          name: "enable",
          text: "状态",
          value: "",
          options: [
            {
              name: "全部",
              value: ""
            },
            {
              name: "启用",
              value: "1"
            },
            {
              name: "禁用",
              value: "0"
            }
          ]
        }
      ],
      theadsInfo: [
        // { index: 0, isShow: false, prop: 'reno', text: '序号', width: 68 },
        {
          index: 1,
          isShow: false,
          prop: "wexinNickname",
          text: "微信昵称",
          minWidth: 50
        },
        {
          index: 2,
          isShow: false,
          prop: "nickName",
          text: "用户名",
          minWidth: 50
        },
        {
          index: 3,
          isShow: false,
          prop: "userId",
          text: "帐号",
          minWidth: 70
        },
        {
          index: 4,
          isShow: false,
          prop: "telephone",
          text: "联系方式",
          minWidth: 60
        },
        {
          index: 5,
          isShow: false,
          prop: "role",
          text: "角色",
          minWidth: 50
        },
        {
          index: 6,
          isShow: false,
          prop: "onDuty",
          text: "上班状态",
          minWidth: 50
        },
        {
          index: 7,
          isShow: false,
          prop: "chakan",
          text: "绑定停车场",
          minWidth: 45
        },
        {
          index: 8,
          isShow: false,
          prop: "createTime",
          text: "创建时间",
          minWidth: 80
        },
        {
          index: 9,
          isShow: false,
          prop: "enable",
          text: "状态",
          minWidth: 50
        }
      ],
      tbodysInfo: []
    };
  }
};
</script>

<style lang="less">
@import "../../assets/less/libs/zTreeStyle.css";

.role-row-modal {
  .first-item {
    width: 240px;
  }
}

.role-select {
  width: 240px;
}

.text-btn {
  padding: 0px 10px !important;
  height: 25px !important;
  line-height: 25px !important;
}

//权限树样式start
.modal-body {
  max-height: 800px;
  overflow-y: scroll;
}

.select-Privilege-modal {
  padding-bottom: 30px;

  .modal-body {
    max-height: 400px;
  }
}

.QRCodeBox {
  margin: 20px auto;
  width: 200px;
  height: 200px;
}

.wechatMsg {
  .wechatPicBox {
    margin: 0 auto;
    width: 200px;
    height: 200px;

    img {
      width: 100%;
      height: 100%;
    }
  }

  p {
    text-align: center;
  }
}

//权限树样式end
</style>
